// display: flex
@mixin df($direction: row) {
  display: flex;
  flex-direction: $direction;
}

// 设置 input placeholder, caret-color
@mixin placeholderColor($color: grey, $fontsize: .14rem, $caretc: #c50b0a) {
  input {
    outline: 0px;
    padding: 0;
    border: none;
    caret-color: $caretc;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: $color;
    font-size: $fontsize;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
    font-size: $fontsize;
  }
  input:-ms-input-placeholder  {
    /* Internet Explorer 10+ */
    color: $color;
    font-size: $fontsize;
  }
  // chrome 处理自动填充了背景色
  input:-webkit-autofill {
    transition-delay: 99999s;
    transition: color 99999s ease-out, background-color 99999s ease-out;
  }
}

// 毛玻璃高斯模糊 backdrop-filter 在 firefox 需要手动开启
@mixin gaussBlur($blur: .3rem, $brightness: .6, $margin: .2rem) {
  .bg-outer {
    // 同时还需要设置定位位置
    width: 100%;
    height: 100%;
    overflow: hidden;
    // 给一个默认背景色, 在图片加载失败时可以显示得清楚些
    background-color: #ddd;
    .bg-inner {
      height: 100%;
      background-position-x: center;
      background-position-y: bottom;
      background-repeat: no-repeat;
      background-size: cover;
      // 会出现边缘透明
      filter: blur($blur) brightness($brightness);
      // 加 drop-shadow 减少透明可视区域 或者使用 box-shadow
      // filter: blur($blur) brightness($brightness) drop-shadow(0px 0px 10px black);
      // 但图片未加载前出现边框
      // box-shadow: 0px 0px 10px 15px #333;
      // 也可以放大, 透明会消失
      // transform: scale($scale);
      // 相当于变大, 与scale类似
      margin: -$margin;
      padding: $margin;
      box-sizing: content-box;
    }
  }
}

// 加载动画
@mixin loader($boxHeight: .12rem, $divWidth: .03rem, $divGap: .01rem, $direction: flex-end, $duration: 1.5s, $delay: -.3s, $initHeight: 10%) {
  // 加载动画
  .loader {
    display: flex;
    align-items: $direction;
    height: $boxHeight;
    position: relative;
    font-size: 0;
    &>div {
      width: $divWidth;
      overflow: hidden;
      border-radius: .1rem;
      background-color: rgba(255, 255, 255, 0.8);
      will-change: contents;
      margin: 0 $divGap;
      animation: loading $duration ease-in-out infinite;
      animation-delay: calc(var(--x) * $delay);
      // &:nth-child(2) {
      //   margin: 0 .02rem;
      // }
    }
    @keyframes loading {
      0% {
        height: $initHeight;
      }
      50% {
        height: 100%;
      }
      100% {
        height: $initHeight;
      }
    }
  }
}
